<style>
    /* 文件列表item */
    .file-choose-list-item {
        position: relative;
        display: inline-block;
        vertical-align: top;
        padding: 8px 8px;
        margin: 5px 0;
        cursor: pointer;
    }

        .file-choose-list-item:hover {
            background-color: #F7F7F7;
        }

    /* 文件列表图片 */
    .file-choose-list-item-img {
        width: 125px;
        height: 90px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-radius: 3px;
        overflow: hidden;
        position: relative;
        background-color: #eee;
    }

        .file-choose-list-item-img.img-icon {
            background-size: inherit;
            background-color: transparent;
        }

    .file-choose-list-item.active .file-choose-list-item-img:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.3);
    }

    /* 文件列表名称 */
    .file-choose-list-item-name {
        width: 125px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333;
        font-size: 12px;
        text-align: center;
        margin-top: 12px;
    }

    /* 文件列表复选框 */
    .file-choose-list-item-ck {
        position: absolute;
        right: 8px;
        top: 8px;
    }

        .file-choose-list-item-ck .layui-form-checkbox {
            padding: 0;
        }

    /* 文件列表操作菜单 */
    .file-choose-oper-menu {
        background-color: #fff;
        position: absolute;
        left: 8px;
        top: 8px;
        border-radius: 2px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, .15);
        transition: all .3s;
        overflow: hidden;
        transform: scale(0);
        transform-origin: left top;
        visibility: hidden;
    }

        .file-choose-oper-menu.show {
            transform: scale(1);
            visibility: visible;
        }

    /* 文件列表操作菜单item */
    .file-choose-oper-menu-item {
        color: #555;
        padding: 6px 5px;
        font-size: 14px;
        min-width: 70px;
        text-align: center;
        cursor: pointer;
        display: block;
    }

        .file-choose-oper-menu-item:hover {
            background-color: #eee;
        }

    /** 文件列表为空时样式 */
    .file-choose-empty {
        text-align: center;
        color: #999;
        padding: 50px 0;
    }

        .file-choose-empty .layui-icon {
            font-size: 60px;
            display: block;
            margin-bottom: 8px;
        }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">当前位置：<span id="tv-current-position">/</span></div>
        <div class="layui-card-body">
            <div>
                <button id="file-btn-home" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    <i class="layui-icon">&#xe68e;</i>主页
                </button>
                <button id="file-btn-back" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    <i class="layui-icon">&#xe65c;</i>返回
                </button>
                <button id="file-btn-refresh" class="layui-btn layui-btn-sm layui-btn-primary icon-btn">
                    <i class="layui-icon">&#xe669;</i>刷新
                </button>
                <button id="file-btn-upload" class="layui-btn layui-btn-sm layui-btn-normal icon-btn">
                    <i class="layui-icon">&#xe681;</i>上传
                </button>
                <!--
                <button id="file-btn-choose" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"
                        style="margin-left: 10px;">
                    <i class="layui-icon">&#xe634;</i>弹窗选择
                </button>
                -->
            </div>
            <div id="file-list-group"></div>
        </div>
    </div>
</div>

<!-- 表单弹窗 -->
<script type="text/html" id="fileDetailDialog">
    <form id="fileDetailForm" lay-filter="fileDetailForm" class="layui-form model-form">
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">名称:</label>
            <div class="layui-input-block">
                <input name="name" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">类型:</label>
            <div class="layui-input-block">
                <input name="type" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">创建:</label>
            <div class="layui-input-block">
                <input name="createTimeStr" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">更新:</label>
            <div class="layui-input-block">
                <input name="updateTimeStr" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">大小:</label>
            <div class="layui-input-block">
                <input name="size" class="layui-input" readonly />
            </div>
        </div>
    </form>
</script>

<!-- js部分 -->
<script>
    layui.use(['jquery', 'layer', 'element', 'upload', 'admin', 'util', 'fileChoose', 'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var upload = layui.upload;
        var admin = layui.admin;
        var util = layui.util;
        var fileChoose = layui.fileChoose;
        var form = layui.form;

        var dataList = [];

        // 渲染列表
        function renderList(dir) {

            layer.load(2);
            dir || (dir = $('#tv-current-position').text());

            // 异步请求
            formium.sendHostWindowRequestAsync("GetFilesAndFolders", dir).then((data) => {
                layer.closeAll('loading');

                var res = JSON.parse(data);

                if (res.code != 200) {
                    layer.alert(res.msg);
                    $("#file-btn-back'").click();
                    return;
                }

                dataList = res.data;

                var htmlStr = fileChoose.renderList({
                    data: dataList,
                    menu: [{
                        name: '下载',
                        event: 'download'
                    }, {
                        name: '<span style="color: #FF5722;">解压</span>',
                        event: 'decompressing'
                    }, {
                        name: '<span style="color: #009688;">详情</span>',
                        event: 'detail'
                    }, {
                        name: '<span style="color: red;">删除</span>',
                        event: 'del'
                    }]
                });
                $('#file-list-group').html(htmlStr);
            });
        }

        setTimeout(function () {
            renderList();
        }, 1000)

        // 列表点击事件
        $(document).off('click.fclip').on('click.fclip', '#file-list-group .file-choose-list-item', function (e) {
            var item = dataList[$(this).data('index')];
            if (item.isDir) {  // 是否是文件夹
                var cDir = $('#tv-current-position').text();
                if (cDir == '/') {
                    cDir = item.name
                } else {
                    if (cDir.endsWith('\\')) {
                        cDir += item.name
                    } else {
                        cDir += '\\' + item.name
                    }
                }

                $('#tv-current-position').text(cDir);
                renderList(cDir);
            } else {
                var $cMenu = $(this).find('.file-choose-oper-menu');
                $('.file-choose-oper-menu').not($cMenu).removeClass('show');
                $cMenu.toggleClass('show');
                e.stopPropagation();
            }
        });

        // 点击空白隐藏下拉框
        $(document).off('click.fclomp').on('click.fclomp', function (e) {
            $('.file-choose-oper-menu').removeClass('show');
        });

        // 菜单事件监听
        $(document).off('click.fclomip').on('click.fclomip', '#file-list-group .file-choose-oper-menu-item', function () {
            var event = $(this).data('event');
            var dataIndex = $(this).parent().parent().data('index');
            var data = dataList[dataIndex];

            if (event == 'del') {  // 删除
                file_del();
            } else if (event == 'download') {
                file_download(data);
            } else if (event == 'decompressing') {
                file_decompressing(data);
            } else if (event == 'detail') {
                file_detail(data);
            }
        });

        // 刷新
        $('#file-btn-refresh').click(function () {
            renderList();
        });

        // 返回上级
        $('#file-btn-back').click(function () {
            var cDir = $('#tv-current-position').text();
            if (cDir != '/') {
                cDir = cDir.substring(0, cDir.lastIndexOf('\\'));
                cDir || (cDir = '/');
                cDir += cDir.length == 2 ? "\\" : ""

                $('#tv-current-position').text(cDir);

                renderList(cDir);
            }
        });

        $("#file-btn-home").click(function () {
            var cDir = '/'
            $('#tv-current-position').text(cDir);
            renderList(cDir);
        });

        // 上传
        upload.render({
            elem: '#file-btn-upload',
            accept: 'file'
        });

        // 弹窗选择
        $('#file-btn-choose').click(function () {
            fileChoose.open({
                fileUrl: '',
                listUrl: 'json/files.json',
                num: 3,
                dialog: {
                    offset: '60px'
                },
                onChoose: function (urls) {
                    layer.msg('你选择了：' + JSON.stringify(urls), { icon: 1 });
                }
            });
        });

        function file_del() {
            layer.confirm('确定要删除此文件吗？', { shade: .1 }, function () {
                layer.msg('操作成功', { icon: 1 });
                renderList();
            });
        }

        // 下载
        function file_download(data) {
            formium.sendHostWindowRequestAsync("DownloadFile", data.url).then((data) => {
                layer.msg('操作成功', { icon: 1 });
            });
        }

        // 解压
        function file_decompressing(data) {
            formium.sendHostWindowRequestAsync("DecompressingFile", data.url).then((data) => {
                var res = JSON.parse(data);
                if (res.code == 200) {
                    layer.msg("指令已下发");
                } else {
                    layer.msg("失败：" + res.msg);
                }
            });
        }

        function file_detail(data) {
            admin.open({
                type: 1,
                title: '文件详情',
                content: $('#fileDetailDialog').html(),
                success: function (layero, dIndex) {
                    // 回显表单数据
                    form.val('fileDetailForm', data);
                    // 禁止弹窗出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }
    });
</script>